<template>
  <div style="width: 970px; margin: 0 auto">
    <div style="color: red">
      <h4>回报设置</h4>
    </div>
    <el-table :data="reward" style="width: 100%">
      <el-table-column prop="rewardid" label="序号" width="90">
      </el-table-column>

      <el-table-column prop="paymoney" label="支付金额" width="90">
        <template slot-scope="scope">
          <span>￥{{ scope.row.paymoney }}.00</span>
        </template>
      </el-table-column>

      <el-table-column prop="rewardnum" label="回报数量"> </el-table-column>

      <el-table-column prop="payone" label="单笔限购">
        <template slot-scope="scope">
          <span v-if="scope.row.payone == 0">不限购</span>
          <span v-else>{{ scope.row.payone }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="rewardcontext" label="回报内容" width="200">
      </el-table-column>

      <el-table-column prop="rewardtime" label="回报时间" width="120">
      </el-table-column>

      <el-table-column label="运费" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.yf == 0">包邮</span>
          <span v-else>￥{{ scope.row.yf }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="130">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            @click="toupdate(scope.row.rewardid)"
          >
          </el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="todelete(scope.row.rewardid)"
          >
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryinfo.pagenum"
      :page-sizes="[1, 3, 5, 10]"
      :page-size="queryinfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <el-dialog
      title="修改回报"
      :visible.sync="updateDialogVisible"
      width="50%"
      :before-close="updatereset"
    >
      <!-- 修改用户信息的表单 -->
      <el-form
        :model="updatereward"
        ref="updaterewardRef"
        :rules="addrules"
        label-width="80px"
      >
        <!-- 回报类型 -->
        <el-form-item label="回报类型：" prop="rewardtype">
          <el-radio v-model="updatereward.rewardtype" :label="1"
            >实物回报</el-radio
          >
          <el-radio v-model="updatereward.rewardtype" :label="2"
            >虚拟物回报</el-radio
          >
        </el-form-item>
        <!-- 支持金额-->
        <el-form-item label="支持金额：" prop="paymoney">
          <el-input
            v-model="updatereward.paymoney"
            style="width: 100px"
          ></el-input>
        </el-form-item>

        <!-- 回报内容 -->
        <el-form-item label="回报内容" prop="rewardcontext">
          <el-input
            type="textarea"
            v-model="updatereward.rewardcontext"
          ></el-input>
        </el-form-item>

        <!-- 回报数量 -->
        <el-form-item label="回报数量：" prop="rewardnum">
          <el-input
            v-model="updatereward.rewardnum"
            style="width: 100px"
          ></el-input>
        </el-form-item>

        <!-- 单笔限购 -->
        <el-form-item label="单笔限购：" prop="payone">
          <el-radio v-model="radio1" @change="updateradio1" label="1">不限购</el-radio>
          <el-radio v-model="radio1" @change="updateradio2" label="2">限购</el-radio>
          <el-input style="width: 100px" 	v-if="radio1 == 1" disabled></el-input>
          <el-input
            v-model="updatereward.payone"
            style="width: 100px"
            v-else
          ></el-input>
        </el-form-item>
        <el-form-item label="运费：" prop="yf">
          <el-input
            v-model="updatereward.yf"
            placeholder="0为包邮"
            style="width: 100px"
          ></el-input>
        </el-form-item>
        <!-- 发票 -->
        <el-form-item label="发票：" prop="invoice">
          <el-radio v-model="updatereward.invoice" :label="1"
            >不可开发票</el-radio
          >
          <el-radio v-model="updatereward.invoice" :label="2"
            >可开发票</el-radio
          >
        </el-form-item>

        <!-- 回报时间 -->
        <el-form-item label="回报时间：" prop="rewardtime">
          <label class="control-label"
            >项目结束后
            <el-input
              v-model="updatereward.rewardtime"
              style="width: 100px"
            ></el-input
            >天后，像支持者发送回报
          </label>
        </el-form-item>
      </el-form>
      <!-- 取消和添加按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="updatereset">取 消</el-button>
        <el-button type="primary" @click="updaterewardForm">确 定</el-button>
      </span>
    </el-dialog>

    <el-tag id="tagHB">添加回报</el-tag>
    <el-card class="box-card">
      <div class="text item">
        <el-form
          :model="addreward"
          :rules="addrules"
          ref="addruleRef"
          label-width="100px"
          class="demo-ruleForm"
        >
          <!-- 回报类型 -->
          <el-form-item label="回报类型：" prop="rewardtype">
            <el-radio v-model="addreward.rewardtype" label="1"
              >实物回报</el-radio
            >
            <el-radio v-model="addreward.rewardtype" label="2"
              >虚拟物回报</el-radio
            >
          </el-form-item>
          <!-- 支持金额-->
          <el-form-item label="支持金额：" prop="paymoney">
            <el-input
              v-model="addreward.paymoney"
              style="width: 100px"
            ></el-input>
          </el-form-item>

          <!-- 回报内容 -->
          <el-form-item label="回报内容" prop="rewardcontext">
            <el-input
              type="textarea"
              v-model="addreward.rewardcontext"
            ></el-input>
          </el-form-item>

          <!-- 回报数量 -->
          <el-form-item label="回报数量：" prop="rewardnum">
            <el-input
              v-model="addreward.rewardnum"
              style="width: 100px"
            ></el-input>
          </el-form-item>

          <!-- 单笔限购 -->
          <el-form-item label="单笔限购：" prop="payone">
            <el-radio v-model="radio1" label="1">不限购</el-radio>
            <el-radio v-model="radio1" label="2">限购</el-radio>
            <el-input
              style="width: 100px"
              v-if="radio1 == 1"
              disabled
            ></el-input>
            <el-input
              v-model="addreward.payone"
              style="width: 100px"
              v-else
            ></el-input>
          </el-form-item>
          <el-form-item label="运费：" prop="yf">
            <el-input
              v-model="addreward.yf"
              placeholder="0为包邮"
              style="width: 100px"
            ></el-input>
          </el-form-item>
          <!-- 发票 -->
          <el-form-item label="发票：" prop="invoice">
            <el-radio v-model="addreward.invoice" label="1"
              >不可开发票</el-radio
            >
            <el-radio v-model="addreward.invoice" label="2">可开发票</el-radio>
          </el-form-item>

          <!-- 回报时间 -->
          <el-form-item label="回报时间：" prop="rewardtime">
            <label class="control-label"
              >项目结束后
              <el-input
                v-model="addreward.rewardtime"
                style="width: 100px"
              ></el-input
              >天后，像支持者发送回报
            </label>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="addidtypeForm">确定</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-form>

        <div>
          <el-button
            type="danger"
            size="small"
            icon="el-icon-info"
            circle
          ></el-button>
          <label class="control-label"><b style="size: 10">提示</b></label>
          <label class="control-label"
            >-3个以上的回报：多些选择能提高项目的支持率。几十、几百、上千元的支持：3个不同档次的回报，能让你的项目更快成功。回报最好是项目的衍生品：
            与项目内容有关的回报更能吸引到大家的支持。</label
          >
        </div>
      </div>
    </el-card>
    <hr>
      <div id="main-sub">
        <el-button type="primary" @click="backItem">上一步</el-button>
        <el-button type="primary" @click="nextItem">下一步</el-button>
      </div>
  </div>
</template>




<script>
import qs from "qs";
import hub from '../js/EventVue.js';
export default {
  data() {
	   var validatePaymoney = (rule, value, callback) => {
		   
	          if (value===''||value===null) {
	            return callback(new Error("请输入金额"));
	          }else{
				this.je(value,callback)
				}
	          };
    return {
      iid:0,
      updateDialogVisible: false,
      queryinfo: {
        pagenum: 1, //访问的页码
        pagesize: 3, //默认页面展示的条数
      },
      addreward: {
        iid: "",
        paymoney: "",
        payone: "0",
        rewardcontext: "",
        rewardtime: "",
        rewardnum: "",
        rewardtype: "1",
        invoice: "1",
        yf: "0",
      },
      reward: [],
      checked: true,
      updatereward: {
        rewardid: "",
        iid: "",
        paymoney: "",
        payone: "0",
        rewardcontext: "",
        rewardtime: "",
        rewardnum: "",
        rewardtype: "",
        invoice: "",
        yf: "",
      },
      radio1: "1",
      total: 0,
	  oldpaymoney:'',
	  oldpayone:'',
      addrules: {
        rewardcontext: [
          {
            required: true,
            message: "请输入文本内容",
            trigger: "blur",
          },
          {
            min: 10,
            max: 200,
            message: "长度在 10 到 200个字符",
            trigger: "blur",
          },
        ],
		paymoney:[
		            {required: true,validator: validatePaymoney, trigger: 'change' }
		          ],
      },
    };
  },
  methods: {
	  updateradio1(){
		  this.oldpayone = this.updatereward.payone
		  console.log(  this.oldpayone +"sss")
		  this.updatereward.payone ="0"
		  
	  },
	  updateradio2(){
		  this.updatereward.payone = this.oldpayone
		  this.oldpayone = ""
	  },
    async selectByItemid() {
      var param = new URLSearchParams();
      param.append("pagenum", this.queryinfo.pagenum);
      param.append("pagesize", this.queryinfo.pagesize);
      param.append("iid", this.iid);
      var res = await this.$http.post("/selectByItemid", param);
      if (res.data.code != 200) {
        this.$message.info(res.data.message);
      } else {
        //把查询到的集合数据放入全局的users对象中
        this.reward = res.data.data.list;
        //获取数据的总条数
        this.total = res.data.data.total;
      }
    },
    async todelete(id) {
      this.$confirm("此操作将永久删除该对象, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          var res = await this.$http.get("deleteReward?rewardid=" + id);
          if (res.data.code == 200) {
            this.$message.success(res.data.message);
			this.queryinfo.pagenum=1;
			this.reward=[]
            this.selectByItemid();
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    reset() {
      this.$refs.addruleRef.resetFields();
    },
    addidtypeForm() {
      this.$refs.addruleRef.validate(async (val) => {
		  console.log(val)
        if (val) {
          this.addreward.iid = this.iid
          var res = await this.$http.post(
            "/insertReward",
            qs.stringify(this.addreward)
          );
          if (res.data.code != 200) {
            this.$message.error(res.data.message);
          } else {
            this.$message.success(res.data.message);
            this.selectByItemid();
          }
        } else {
          this.$message.error("你输入的数据不合法");
        }
        this.reset();
      });
    },
    handleSizeChange(newpagesize) {
      this.queryinfo.pagesize = newpagesize;
      this.selectByItemid();
    },
    handleCurrentChange(newpagenum) {
      this.queryinfo.pagenum = newpagenum;
      this.selectByItemid();
    },
	async je(value,callback){
		var param = new URLSearchParams();
		param.append("iid", this.iid);
		param.append("paymoney", value);
		
		var res = await this.$http.post("/selectBymoney", param);
       if (res.data.code != 200) {
           this.$message.info(res.data.message);
			if(this.oldpaymoney===value){
				callback()
			}else{
				return callback(new Error("此数据已经拥有"))
			}
			
         } else{
           callback()
         }
	},
    
    updatereset() {
      this.updateDialogVisible = false;
      this.$refs.updaterewardRef.resetFields();
    },
    async toupdate(id) {
      var res = await this.$http.get("selectByrewardid?rewardid=" + id);
      if (res.data.code == 200) {
        this.updatereward = res.data.data;
		this.oldpaymoney=res.data.data.paymoney
		if(res.data.data.payone===0){
			this.radio1="1"
		}else{
			this.radio1="2"
		}
        this.updateDialogVisible = true;
      } else {
        this.$message.info(res.data.message);
      }
    },
    updaterewardForm() {
      this.$refs.updaterewardRef.validate(async (val) => {
        if (val) {
          var res = await this.$http.post(
            "upadteReward",
            qs.stringify(this.updatereward)
          );
          if (res.data.code == 200) {
            this.$message.success(res.data.message);
            this.selectByItemid();
          } else {
            this.$message.error(res.data.message);
          }
          this.updatereset();
        } else {
          this.$message.error("数据不合法，请检查");
        }
      });
    },
      //点击下一步执行
    async nextItem(){
      //alert(this.iid)
      this.$emit("forNum",3)
      await this.$router.push("/s_s_3/"+this.iid);
      alert("请进行下一步操作")
    },
    //点击上一步执行
    async backItem(){
      let param = new URLSearchParams();
      param.append("iid",this.iid);
      let res = await this.$http.post("deleteByIid",param);
      if (res.data.code == 200){
        await this.$router.push("/s_s_1");
        alert("请重新填写数据")
      }
    }
  },
  /* beforeDestroy() {
    //兄弟组件传值 把iid传入下一步
    hub.$emit('iid',this.iid)
  }, */
/*  created() {
    //从兄弟组件中获取值
    let that = this;
    hub.$on('iid',(val) => {
      that.iid = val
	  console.log(that.iid)
      // alert(that.iid)
    })
  }, */
  mounted() {
     /*this.selectUsernameById();*/
	 this.iid = this.$route.params.iid;
	 
    this.selectByItemid();
  },
};
</script>



<style>
.el-table-column {
  background: #0c9a9a;
}

.el-aside {
  background-color: #ecf0f5;
}

.ms {
  text-align: right;
}

#tagHB {
  margin-top: 10px;
  margin-right: 40px;
  width: 80px;
}
#tagHB {
  margin-top: 30px;
  width: 140px;
  height: 50px !important;
  font-size: 30px !important;
  line-height: 50px !important;
}
</style>

